<script lang="ts" setup>
import type { PropType } from 'vue'
import IconFont from '@/assets/icons/iconFont'
import { useTodoListStore } from '@/stores/list.store'
import { useThemeCustomList } from '@/hooks/useThemeCustomList'

import type { IListItem } from '@/stores/interfaces/list.interface'

const { category } = useThemeCustomList()

const props = defineProps({
  itemInfo: {
    type: Object as PropType<IListItem>,
    required: true
  }
})

const { deleteList, updateList } = useTodoListStore()
function updateListState(key: keyof IListItem, value?: number) {
  updateList({
    id: props.itemInfo.id,
    [key]: value ?? props.itemInfo[key]
  })
}

function handleDelete() {
  deleteList(props.itemInfo.id)
}
</script>

<template>
  <a-doption @click="updateListState('type', 0)">
    <template #icon>
      <IconFont type="icon-taiyang-copy" :size="20" />
    </template>
    <span>{{
      $t(itemInfo.type === 0 ? 'list.item.option.removemyday' : 'list.item.option.addtomyday')
    }}</span>
  </a-doption>
  <a-doption @click="updateListState('important')">
    <template #icon><IconFont type="icon-xingxing" :size="20" /></template>
    <span>{{
      $t(itemInfo.important ? 'list.item.option.removemain' : 'list.item.option.addtomain')
    }}</span>
  </a-doption>
  <a-doption @click="updateListState('finished')">
    <template #icon><IconFont type="icon-quangou" :size="20" /></template>
    <span>{{ $t(itemInfo.finished ? 'list.item.option.todo' : 'list.item.option.done') }}</span>
  </a-doption>
  <a-dsubmenu trigger="hover" class="w-96">
    <template #icon>
      <IconAttachment :size="20" />
    </template>
    <template #default>
      <span>{{ $t('list.item.option.addTo') }}</span>
    </template>
    <template #content>
      <a-doption @click="updateListState('type', 8)">
        <template #icon>
          <IconFont type="icon-zhuye" :size="20" />
        </template>
        <span>{{ $t('layout.menu.task') }}</span>
      </a-doption>
      <a-doption
        v-for="item of category"
        :key="item.uuid"
        :value="item.uuid"
        @click="updateListState('type', item.uuid)"
      >
        <template #icon>
          <IconAttachment :size="20" />
        </template>
        <span>{{ item.title }}</span>
      </a-doption>
    </template>
  </a-dsubmenu>
  <!-- <a-doption><span>{{ $t('list.item.option5') }}</span></a-doption>
        <a-doption><span>{{ $t('list.item.option6') }}</span></a-doption>
        <a-doption><span>{{ $t('list.item.option7') }}</span></a-doption>
        <a-doption><span>{{ $t('list.item.option8') }}</span></a-doption> -->
  <a-doption value="delete" @click="handleDelete">
    <template #icon><IconFont type="icon-lajitong" :size="20" /></template>
    <p class="option">
      <span class="text-red-500">{{ $t('list.item.option.delete') }}</span>
      <span>Delete</span>
    </p>
  </a-doption>
</template>

<style scoped>
.option {
  @apply flex min-w-48 justify-between;
  @apply last:text-gray-600 dark:last:text-gray-400;
}
</style>
